<template>
<!-- 成果已合作 -->
  <div>
    <ul v-if="tableData.length>0">
      <li v-for="(item, index) in tableData" :key="index">
        <div class="info1">
          <div class="box">
            <div class="logo">
              <img :title="item.src" class="src-img" v-if="item.srcImg === ''" src="@/assets/img/default.png" alt="">
              <img :title="item.src" class="src-img" v-else :src="item.srcImg" alt="">
            </div>
            <h4 @click="goDetail(item.src)">{{item.src}}</h4>
          </div>
          <div class="box">
            <div class="logo">
              <img :title="item.target" class="target-img" v-if="item.targetImg === ''" src="@/assets/img/default.png" alt="">
              <img :title="item.target" class="target-img" v-else :src="item.targetImg" alt="">
            </div>
            <h4 @click="goDetail(item.target)">{{item.target}}</h4>
          </div>
        </div>
        <div class="info2">
          <ul class="info2-item">
            <li class="theader">
              <p>合作成果</p>
              <p>合作起始时间</p>
              <p>涉及专利数量</p>
            </li>
            <li v-for="(ite, j) in item.items" :key="j" @click="handdle(ite)" class="tbody">
              <p>{{ite.ipc_kind}}</p>
              <p>{{ite.start}}</p>
              <p>{{ite.count}}</p>
            </li>
          </ul>
          <div class="info2-item2">
            <p class="tit">产业标签</p>
            <div class="content">
              <p class="tags">
                <span v-for="(it, b) in item.labels" :key="b" :title="it" :class="{uni3form: item.items.length<=1}">{{it}}</span>
              </p>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <p v-if="tableData.length<=0" class="no-data"><i v-show="noDataStr!=='暂无数据'" class="el-icon-loading"></i>{{noDataStr}}</p>
    <v-dialog-pn ref="DialogPartentDetail"></v-dialog-pn>
  </div>
</template>

<script>
import vDialogPn from '@/views/components/v-dialog-pn'
export default {
  props: {
    activeName: {
      type: String
    },
    ndata: {
      type: Array
    },
    noDataStr: {
      type: String
    }
  },
  data() {
    return {
      tableData: [],
      ipi: 1,
      ips: 10,
      total: 0,
    }
  },
  components: {
    vDialogPn
  },
  methods: {
    init() {
      this.tableData = JSON.parse(JSON.stringify(this.ndata))
    },
    getImg(companyName, func) {
      let promise = new Promise((resolve, reject) => {
        this.$post(this.$Url.search.companyList, {
          name: companyName,
          ipi: 1,
          ips: 1
        }).then(res => {
          let data = res.data
          if (data) {
            let eid = data.result && data.result[0]._id
            resolve(eid)
          }
        }).catch(err => {})
      })
      promise.then((eid) => {
        this.$get(this.$Url.search.companyLogo, {
          eid: eid
        }).then(res => {
          let data = res.data
          if (data) {
            return func(data)
          }
        }).catch(err => {})
      })
    },
    // 分页
    handleCurrentChange(val){
      this.ipi = val
    },
    headerCellStyle() {
      return {
        'font-weight': 'normal',
        'color': '#86899e',
        'background-color': '#f3f6f9'
      }
    },
    goDetail(name) {
      // 判断是企业还是机构
      let p1 = new Promise((resolve, reject) => {
        this.$get(this.$Url.production.getTypeByName, {
          name
        }).then(res => {
          let data = res.data || ''
          let isCompany = false
          if (data.length > 0) {
            data === '企业' ? isCompany = true : isCompany = false
          }
          resolve(isCompany)
        })
      })
    
      p1.then(res => {
        let isCompany = res
        if (isCompany === true) { // 如果是企业，则跳转到企业详情
          this.$Bus.$emit("progressBar", name)
        } else { // 如果是非企业，则跳转到机构详情
          // 获取companyId
          let p2 = new Promise((resolve, reject) => {
            this.$get(this.$Url.company.getCompanyId, {
              keyWord: name
            }).then((res) => {
              let data = res.data
              let eid = ''
              if(data){
                eid = data.result[0]._id
              }
              resolve(eid)
            })
          })

          // 获取专利数量
          let p3 = new Promise((resolve, reject) => {
            this.$get(this.$Url.production.getPatentCountByName, {
              name: name
            }).then(res => {
              let data = res.data
              let doc_count = 0
              if (data) {
                doc_count = data
              }
              resolve(doc_count)
            })
          })

          Promise.all([p2, p3]).then(res => {
            this.$router.push({
              name: 'SynergyInsDetails',
              query: {
                name,
                eid: res[0],
                doc_count: res[1],
                isCompany: isCompany
              }
            })
          })

        }
      })
    },
    // 表格行点击
    handdle(row){
      if(row.pns) this.$refs.DialogPartentDetail.init(row.pns)
    },
  },
  watch: {
    ndata() {
      if (this.activeName === 'first') {
        let ndata = JSON.parse(JSON.stringify(this.ndata))
        let promise = new Promise((resolve, reject) => {
          this.getImg(ndata[0].src, (imgData) => {
            resolve(imgData)
          })
        })
        promise.then((srcImg) => {
          ndata.forEach(v => {
            v.srcImg = srcImg
            v.targetImg = ''
            
            this.getImg(v.target, (imgData) => {
              this.$set(v, 'targetImg', imgData)
            })
          })
          this.tableData = ndata
        })

      }
      
    }
  },
  mounted() {
    if (this.ndata && this.ndata.length > 0) {
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
// .eltable {
//   font-size: 14px;
//   color: #4f515b;
//   .company-box {
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     .icon-box {
//       position: relative;
//       padding-left: 10px;
//       padding-right: 60px;
//       img {
//         display: block;
//         width: 60px;
//         height: 60px;
//         border: 4px solid #fff;
//         border-radius: 50%;
//         box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
//         &.target-img {
//           position: absolute;
//           top: 0;
//           right: 20px;
//         }
//       }
//     }
//     .names {
//       flex: 1;
//       font-size: 16px;
//       font-weight: bold;
//       span {
//         display: block;
//         width: 100%;
//       }
//     }
//   }
//   .results {
//     font-weight: bold;
//     color: #504da6;
//   }
//   .status {
//     display: inline-block;
//     padding: 4px 16px;
//     border-radius: 18px;
//     font-weight: bold;
//     color: #504da6;
//     background-color: #edeafc;
//   }
// }

.info1 {
  position: relative;
  display: flex;
  .box {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 60px;
    margin: 10px 0;
    .logo {
      position: absolute;
      top: 0;
      left: 4px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      img {
        display: block;
        width: 60px;
        height: 60px;
        border: 4px solid #fff;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      }
    }
    h4 {
      position: relative;
      display: inline-block;
      line-height: 60px;
      padding-left: 80px;
      padding-right: 20px;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }
  }
}
.info2 {
  display: flex;
  .info2-item {
    position: relative;
    flex: .75;
    list-style: none;
    .theader {
      display: flex;
      padding: 10px 0;
      border-bottom: 1px solid #EBEEF5;
      color: rgb(134, 137, 158);
      background-color: rgb(243, 246, 249);
      > p {
        flex: 1;
        position: relative;
        line-height: 23px;
        padding-left: 10px;
        padding-right: 10px;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
      }
    }
    .tbody {
      display: flex;
      width: 100%;
      padding: 10px 0;
      border-bottom: 1px solid #EBEEF5;
      box-sizing: border-box;
      &:hover {
        background-color: #f3f6f9;
        cursor: pointer;
      }
      > p {
        flex: 1;
        position: relative;
        line-height: 23px;
        padding-left: 10px;
        padding-right: 10px;
      }
    }
  }
  .info2-item2 {
    position: relative;
    flex: .25;
    .tit {
      line-height: 23px;
      padding: 10px;
      border-bottom: 1px solid #EBEEF5;
      vertical-align: middle;
      color: #86899E;
      background-color: #F3F6F9;
    }
    .content {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: calc(100% - 44px);
      border-left: 1px solid #EBEEF5;
      border-right: 1px solid #EBEEF5;
      border-bottom: 1px solid #EBEEF5;
      box-sizing: border-box;
    }
  }
}
.tags {
  position: relative;
  width: 100%;
  padding-top: 4px;
  padding-left: 10px;
  text-align: center;
  span {
    display: inline-block;
    line-height: 24px;
    padding: 0 10px;
    border-radius: 4px;
    margin-right: 10px;
    margin-bottom: 4px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background-color: $mainColor;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &.uni3form {
      max-width: calc((100% - 40px) / 3);
    }
  }
}
</style>